import Taro, { Component } from "@tarojs/taro";
import { AtTabs, AtTabsPane } from "taro-ui";

import TimeLine from "../TimeLine/timeLine";
import DayPlan from "../DayPlan/dayPlan";
import MyPermission from "../MyPermission/myPermission";
import WorkToDo from "../WorkToDo/workToDo"

class PlanTab extends Component {
  constructor() {
    super();
    this.state = {
      currentTab: 0
    };
  }

  handleClick(value) {
    this.setState({
      currentTab: value
    });
  }

  render() {
    const tabList = [
      { title: "今日计划" },
      { title: "完成任务" },
      { title: "待办事项" },
      { title: "制定计划" }
    ];
    return (
      <AtTabs
        swipeable
        current={this.state.currentTab}
        tabList={tabList}
        onClick={this.handleClick.bind(this)}
      >
        <AtTabsPane
          className='tab-contents'
          current={this.state.currentTab}
          index={0}
        >
          <TimeLine />
        </AtTabsPane>
        <AtTabsPane
          className='tab-contents'
          current={this.state.currentTab}
          index={1}
        >
          <MyPermission />
        </AtTabsPane>
        <AtTabsPane
          className='tab-contents'
          current={this.state.currentTab}
          index={2}
        >
          <WorkToDo />
        </AtTabsPane>
        <AtTabsPane
          className='tab-contents'
          current={this.state.currentTab}
          index={3}
        >
          <DayPlan />
        </AtTabsPane>
      </AtTabs>
    );
  }
}

export default PlanTab;
